<template>
  <a-card :bordered="false">
    <a-col :span="24">
      <a-spin tip="Loading..." :spinning="spinning">
        <div>
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <!--<a-col :md="6" :sm="10">
                  <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-date-picker
                      style="width: 210px"
                      v-model="queryParam.date"
                      format="YYYY-MM-DD"
                      placeholder="查询日期"
                      @change="onDateChange"
                      @ok="onDateOk"
                    />
                  </a-form-item>
                </a-col>-->


                <a-col :xl="10" :lg="11" :md="12" :sm="24">
                  <a-form-item label="日期">
                    <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择开始日期"
                            format="YYYY-MM-DD"
                            class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
                    <span class="query-group-split-cust"></span>
                    <j-date :show-time="true"
                            date-format="YYYY-MM-DD"
                            format="YYYY-MM-DD"
                            placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
                  </a-form-item>
                </a-col>


                <a-col :xl="10" :lg="11" :md="12" :sm="24">
                  <a-form-item label="强度">
                    <a-input-number id="inputNumber" v-model="strength" :min="0" :max="10"/>
                  </a-form-item>
                </a-col>



                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">

            <a-col :md="6" :sm="24">
                <a-button type="primary" style="left: 10px" @click="getData" icon="search">查询</a-button>
            </a-col>
          </span>

              </a-row>
            </a-form>
          </div>
          <a-row>
            <template v-if="dataFlag">
              <a-empty  />
            </template>
            <!-- 预览区域 -->
            <a-col :span="24">

              <template>
                <a-spin style="position: absolute;top: 50%;left: 48%" :spinning="spinning2"/>

           <!--     <a-page-header
                  style="border: 1px solid rgb(235, 237, 240)"
                  title="工作数据"
                ></a-page-header>-->
               <!-- <a-row v-if="this.total>1">
                  <div style="float: right;">
                    <a-pagination v-model="current" :total="total" :pageSize="pageSize" @change="getData" show-less-items />
                  </div>
                </a-row>-->
                <a-row>
                <div v-if="!spinning2" v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
                  <div
                    style="float: left;padding-left: 30px;width:200px;height:200px;margin-right: 10px;margin: 0 18px 18px 0;">
                    <div
                      style="width: 100%;height: 80%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                      <img style="width: 100%;height: 80%;cursor: pointer" :src="fileDetail.imgUrl"
                           :preview="dataSource[0].key">
                    </div>
                    <div class="meta">
                      <p>{{fileDetail.dates}}</p>
                      <div class="action cl"><span class="fl" style="margin-top: 5px;">强度:</span>
                        <div class="rate cl wrapper">
                          <a-rate v-model:value="fileDetail.strength" color="#3fd153" :allowClear="false" :count="10"
                                  :disabled=true>
                            <a-icon slot="character" type="star" theme="filled" style="font-size:12px;"/>
                          </a-rate>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </a-row>
                <a-row v-if="this.total>1">
                  <div style="float: right;">
                    <a-pagination v-model="current" :total="total" :pageSize="pageSize" @change="getData"
                                  show-less-items/>
                  </div>
                </a-row>

              </template>

            </a-col>
          </a-row>
        </div>
        <div>
        </div>
      </a-spin>
      <p></p>
    </a-col>
  </a-card>
</template>

<script>

import ARow from 'ant-design-vue/es/grid/Row'
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend'
import Rate from 'ant-design-vue/es/vc-rate/src/Rate'
import {getAction, postAction} from '@/api/manage'

import { ref } from 'vue';

export default {
  name: 'ImagPreview',
  components: {
    ARow,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Rate
  },
  setup() {
    return {
      // current: ref(2),
    };
  },
  data() {
    return {
      strength:1,
      current:1,
      total :100,
      pageSize :28,
      description: '图片预览页面',
      spinning: false,
      spinning2: false,
      fileDetails: [],
      params: {},
      dataFlag: true,
      //数据集
      dataSource: [
        {
          key:0,
          fileDetails:[]
        }
      ],
      url: {},
      labelCol: {
        xs: { span: 1 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 10 },
        sm: { span: 16 },
      },
      queryParam: {
        date:null
      },
    }
  },
  created() {
    console.log("查看全部工作日志：",this.$route.query)
    this.params = this.$route.query;
    this.getNowDate();
    this.getData();
  },
  methods: {
    loadData() {
      this.spinning2 = true;
      getAction('/sysUserReport/list', {userId: this.params.userId}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          this.fileDetails = [];
          for (let i = 0; i < list.length; i++) {
            this.dataFlag = false;
            this.fileDetails.push({
              imgUrl: list[i].pic,
              dates: list[i].dates,
              strength: parseInt(list[i].strength)
            })
          }
          console.log(this.fileDetails)
          this.$set(this.dataSource, 0, {
            key: 0,
            fileDetails: this.fileDetails
          });
          console.log(this.dataSource)
          this.spinning2 = false;

        }
      });
    },
    getData(){
      this.spinning2 = true;

      getAction('/sysUserReport/page', {userId: this.params.userId,
        strength: this.strength,
        date_begin:this.queryParam.createTime_begin,
        date_end:this.queryParam.createTime_end,pageNo:this.current,pageSize:this.pageSize}).then(res => {
        console.log("/sysUserReport/page ",res)
        if (res.success) {
          let list = res.result.records;
          this.total = res.result.total;
          this.fileDetails = [];
          for (let i = 0; i < list.length; i++) {
            this.dataFlag = false;
            this.fileDetails.push({
              imgUrl: list[i].pic,
              dates: list[i].dates,
              strength: parseInt(list[i].strength)
            })
          }
          console.log(this.fileDetails)
          this.$set(this.dataSource, 0, {
            key: 0,
            fileDetails: this.fileDetails
          });
          console.log(this.dataSource)
          this.spinning2 = false;

        }
      });

},
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      this.queryParam.date = NOW_MONTHS_AGO;
    },
    onDateChange: function (value, dateString) {
      this.queryParam.date=dateString;
    },
    onDateOk(value) {
      console.log(value);
    }
  }
}
</script>
<style scoped>
.table-operator {
  margin-bottom: 10px
}

.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890FF !important;
}

.meta {
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 0px;
}

.meta p {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 0px
}

.log-head {
  overflow: hidden;
  background: #ffffff;
  padding-left: 30px;
}

.log-head li {
  width: 235px;
  height: 110px;
  background: #f6f8f9;
  border-radius: 4px;
  text-align: center;
  padding: 30px 0;
  font-family: PingFangSC-Regular;
  margin-right: 20px;
  box-sizing: border-box;
}

.log-head li h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}

.log-head li p {
  color: rgba(9, 34, 53, .5);
  line-height: 24px;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  list-style: none;
}

.fl {
  float: left;
}

::v-deep .wrapper li {
  margin-right: 0px;
}

.ant-rate {
  color: #3fd153;
  font-size: 10px;
}
</style>